// 销售记录
import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Empty, Timeline, TimelineItem } from 'ant-design-vue'
import RenderDescription, { type DescItemDto } from '@/components/render-descriotion/Index'
import { getPaySalesRecord } from '@/api/record'
import { PaywageSaleScenarioCnEnum } from '@/const/enum'

interface RecordDataDto {
    date: string
    list: DescItemDto[]
}

@Component
export class SaleRecord extends Render {
    @Prop() companyId!: number

    recordData = [] as RecordDataDto[]

    async initData() {
        const res = await getPaySalesRecord({
            companyId: this.companyId
        })
        res.forEach((i) => {
            this.recordData.push({
                date: i.payDate,
                list: [
                    {
                        label: '销售场景',
                        value: PaywageSaleScenarioCnEnum[i.scenario]
                    },
                    {
                        label: '付款方式',
                        value: i.payMode
                    },
                    {
                        label: '到期时间',
                        value: i.dueDate
                    },
                    {
                        label: '服务金额',
                        value: `¥${i.serviceAmount ?? 0}`,
                    },
                    {
                        label: '开户金额',
                        value: `¥${i.openAccountMoney ?? 0}`
                    },
                    {
                        label: '总金额',
                        value: `¥${i.totalAmount ?? 0}`
                    }
                ]
            })
        })
    }

    onMounted() {
        this.initData()
    }

    render() {
        return (
            <>
                {
                    this.recordData.length ?
                        <Timeline>
                            {this.recordData.map((item, index) => {
                                return (
                                    <TimelineItem>
                                        <div>
                                            <div class="mb-8px">{item.date}</div>
                                            <RenderDescription
                                                labelWidth={140}
                                                renderData={item.list} 
                                            />
                                        </div>
                                    </TimelineItem>
                                )
                            })}
                        </Timeline>
                        : <Empty class="mt-20px" />
                }

            </>
        )
    }
}

export default toNative<{ companyId: number }, {}>(SaleRecord)
